﻿@model MobileTouchCafe.Models.HomeData
           
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Themes/Fontend/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Themes/Fontend/ui-lightness/jquery-ui-1.10.2.custom.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Utils.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.bpopup.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.1.10/jquery-ui-1.10.2.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.1.10/jquery.ui.datepicker-vi.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.1.10/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            function ref_table() {
                $.ajax({
                    url: "/Home/GetAllTable/",
                    dataType: "json",
                    cache: false,
                    type: 'GET',
                    data: {},
                    success: function (result) {
                        if (result.Success) {
                            var id_vitri = 0, _new_line = 0, _html = '', _max_in_line = 0, _count = 0;
                            _max_in_line = parseInt((window.innerWidth - 40) / 160);

                            for (var i = 0; i < result.data.length; i++) {
                                if (id_vitri != result.data[i].IdViTri) {
                                    id_vitri = result.data[i].IdViTri;
                                    _html += "<div class='table_item' style='width:" + window.innerWidth + "px' id='lo_" + id_vitri + "'>";
                                    _html += "<table class='table_item_inner'>";
                                    _count = 0;
                                    _new_line = 0;
                                }

                                if (_new_line == 0) {
                                    _new_line = -1;
                                    _html += "<tr>"
                                }

                                _html += "<td class='itms'>";

                                if (result.data[i].State > 0) {
                                    _html += "<div class='item_detail' value='" + result.data[i].IdBan + "' id='itm_" + result.data[i].IdBan + "' onclick='itm_click(this)' txt='" + result.data[i].TenBan + "'>";
                                    _html += "<img src='/Content/Themes/Fontend/images/tbl2.png' />";
                                    _html += "<span>" + result.data[i].TenBan + "</span></div>";
                                }
                                else {
                                    _html += "<div class='item_detail' value='" + result.data[i].IdBan + "' id='itm_" + result.data[i].IdBan + "' onclick='itm_click(this)' txt='" + result.data[i].TenBan + "'>";
                                    _html += "<img src='/Content/Themes/Fontend/images/tbl.png' />";
                                    _html += "<span>" + result.data[i].TenBan + "</span></div>";
                                }

                                _html += "</td>";

                                if (_count > 0 && (_count + 1) % _max_in_line == 0) { //new line
                                    _html += "</tr>"
                                    _new_line = 0;
                                }

                                _count++;

                                if (id_vitri > 0 && i < result.data.length - 1 && id_vitri != result.data[i + 1].IdViTri) {
                                    _html += "</table>";
                                    _html += "</div>";
                                }
                            }

                            if (_html != '') {
                                _html += "</table>";
                                _html += "</div>";
                            }
                            $('#table_container').html(_html);

                            var _max_height = 0;
                            $("#table_container div").each(function (i) {
                                if (parseInt($(this).css('height')) > _max_height)
                                    _max_height = parseInt($(this).css('height'));
                            });
                        }
                    }
                });
            }

            $("#table").css('height', window.innerHeight - (parseInt($("#toolbar").css('height'), 10) +
                    parseInt($("#location").css('height'), 10) + 20
                ));

            $('#table').css('height', $("#table").css('height'));

            ref_table();

            $('#table_container').on('mousedown', function (e) {
                $(this).data('p0', { x: e.pageX, y: e.pageY });
            }).on('mouseup', function (e) {
                var p0 = $(this).data('p0'),
                p1 = { x: e.pageX, y: e.pageY },
                d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));

                if (d < 4) {
                    //alert('clicked');
                }
                else { //drag
                    if (p1.x - p0.x > 0) onPrev();
                    else onNext();
                }
            })


            $("#location tr td").click(function () {
                if ($(this).attr('value') != null && $(this).attr('value') != undefined) {
                    slide($(this));

                    $("#location tr td").each(function (i) {
                        $(this).attr('active', '0');
                    });
                    $(this).attr('active', '1');
                }
            });

            function onNext() {
                var _id = 1;
                $("#location tr td").each(function (i) {
                    if ($(this).attr('active') == '1')
                        _id = parseInt($(this).attr('value'));
                });
                var _obj = '#location_' + (_id + 1);
                $(_obj).click();
            }

            function onPrev() {
                var _id = 1;
                $("#location tr td").each(function (i) {
                    if ($(this).attr('active') == '1')
                        _id = parseInt($(this).attr('value'));
                });
                if (_id - 1 > 0)
                    $('#location_' + (_id - 1)).click();
            }

            function slide(obj) {
                var id = $(obj).attr('value');
                var _left = -$('#lo_' + id).position().left;

                var $lefty = $('#table_container');

                $lefty.animate({

                    left: parseInt($lefty.css('left'), 10) == _left ? -$lefty.outerWidth() : _left
                });
            }
        });
    </script>
</head>
<body>

    <div id="page">
        <table id="toolbar">
            <tr>
                <td id="home">VINAS</td>
                <td><input id="command_line" type="text" class="corner_left corner_right"/> </td>
                <td id="go"><div class="corner_left corner_right">Go</div> </td>
                <td class="btn">
                <span class="bar_button corner_left"></span>
                <span class="bar_button"></span>
                <span class="bar_button"></span>
                <span class="bar_button corner_right"></span>
                </td>
            </tr>
        </table>
        <table id="location">
            <tr>
                <td class="frist">Khuc vực</td>
                @if (Model != null && !object.Equals(Model.ViTriBan, null))
                { 
                    for (int i = 0; i < Model.ViTriBan.Count; i++)
                    {
                        var _id = "location_" + Model.ViTriBan[i].Value;
                    
                        if (i == Model.ViTriBan.Count - 1)
                        {
                            <td class="item corner_right" active = "0" value="@Model.ViTriBan[i].Value" id="@_id">@Model.ViTriBan[i].Text</td>
                        }
                        else
                        {
                            <td class="item" active = "0" value="@Model.ViTriBan[i].Value" id="@_id">@Model.ViTriBan[i].Text</td>
                        }
                    }
                }
            </tr>
        </table>
        <div id="table">
            <div id="table_container">
                
            </div>
            <script>
                
            </script>
            <div id="detail_container"></div>
        </div>
    </div>

    <input id="openning_table_name" type="hidden" value="0" />

    @RenderBody()
    
    <script>
        function itm_click(obj) {
            var id = $(obj).attr('value');
            
            $.ajax({
                url: "/Home/ViewDetail/",
                dataType: "json",
                cache: false,
                type: 'GET',
                data: { id: id },
                success: function (result) {
                    if (result.Success) {
                        $('#detail_container').html(result.data);
                        $('#detail_container').css('display', 'block');
                    }
                }
            });

            $('#openning_table_name').val($(obj).attr('txt'));
        }
    </script>
</body>
</html>
